import React, { useState, useEffect, useRef } from 'react'
import { Dropdown, Radio, Space, Picker, TextArea,Toast } from 'antd-mobile'
import "./index.less"
import ApiIndex from '@/api/approve.js';
const Index = (props) => {
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState([])
    const [valueTxt, setValueTxt] = useState('')

    const [reason, setReason] = useState('')

    const [basicColumns, setbasicColumns] = useState([
        [
            {label:'通过',value:'Y'},
            {label:'不通过',value:'N'},
        ]
    ])


    // useEffect(() => {
    //     getDic()
    // }, [])

    useEffect(() => {
        let txt = basicColumns[0]?.find(el => el.value == value[0])?.label
        setValueTxt(txt)
    }, [value])


    // const getDic = () => {
    //     ApiIndex.dictDetails({ dictCode: 'REPAIR_TASK_TYPE' }).then(res => {
    //         if (res.data.code == 0) {
    //             setbasicColumns([res.data.data.records])
    //         }
    //     })
    // }

    const close = () => {
        props.onCloseModal()
    }

    const sure = () => {
        ApiIndex.approval({
            id: props.no.current,
            reason:reason,
            passedOrNot:value[0]
        }).then(res => {
            Toast.show({
                content: res.data.msg,
            })
            close()
        })
    }
    return (
        <div className="main approve-pop">
            <div className="m-mask"></div>
            <div className="m-content">
                <div className="m-content-title">
                    审批
                </div>
                <div className="m-content-main">
                    <div className="m-select">
                        <div className="m-select-title">
                            审批状态：
                        </div>
                        {
                            valueTxt ?<div className="m-select-pick" onClick={() => setVisible(true)}>{valueTxt}</div>:
                            <span  onClick={() => setVisible(true)} style={{color:"rgb(171,171,171)"}}>请选择审批状态</span>
                        }
                        
                    </div>
                    <div className="m-remark">
                        <TextArea className="area"
                            value={reason}
                            onChange={val => {
                                setReason(val)
                            }} type="text" placeholder="请输入备注" />
                    </div>
                </div>
                <div className="m-footer">
                    <div className="m-button m-c" onClick={close}>取 消</div>
                    <div className="m-button" onClick={sure}>确 定</div>
                </div>
            </div>

            <Picker
                columns={basicColumns}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                style={{
                    '--title-font-size': '20px',
                    '--header-button-font-size': '18px',
                    '--item-font-size': '18px',
                    '--item-height': '40px',
                }}
                value={value}
                onConfirm={v => {
                    console.log(v, 'vvvv')
                    setValue(v)
                }}
            />
        </div>

    )
}


export default Index
